<template>
  <div class="mine">
    <div class="user">
      <img :src="userInfo.avatar?userInfo.avatar:require('../assets/image/linshi.jpg')">
      <div class="name">
        <p>昵称:{{userInfo.nickName}}</p>
        <p>电话:{{userInfo.userName}}</p>
      </div>
    </div>
    <div class="btn">
      <van-button round block type="danger" @click="logout">退出登录</van-button>
    </div>
  </div>
</template>
<script>
// import {getCurrentInstance} from 'vue'
// import { Toast } from 'vant';
import {useRouter} from 'vue-router'
export default {
  setup() {
    // 获取保存的用户信息
    const userInfo = localStorage.getItem('userInfo')?JSON.parse(localStorage.getItem('userInfo')):{}
    console.log(userInfo);
    // 路由
    const router = useRouter()
    // 退出
    function logout(){
      localStorage.clear('userInfo')
      localStorage.clear('token')
      router.push('/login')
    }
    return{
      userInfo,
      logout
    }
  }
}
</script>
<style lang="less" scoped>
.mine{
  .user{
    display: flex;
    align-items: center;
    width: 750px;
    height: 350px;
    background: url('../assets/image/mine_bj.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .name{
      margin-left: 10px;
      p{
        font-size: 40px;
        font-weight: 500;
      }
    }
    img{
      border-radius: 50%;
      width: 140px;
      height: 140px;
      margin-left: 20px;
    }
  }
  .btn{
    margin-top: 300px;
  }
}
</style>